<script setup lang="ts">
import type { CascaderOptionType } from 'ant-design-vue/es/cascader';

import { computed } from 'vue';

import { ApiComponent } from '@vben/common-ui';

import { Cascader } from 'ant-design-vue';

import { createApiFunction } from '#/util/tool';

const props = withDefaults(
  defineProps<{
    api: ((arg?: any) => Promise<any[] | Record<string, any>>) | string;

    childrenField?: string;
    labelField?: string;
    // 请求方式
    requestMethod?: 'get' | 'post';
    value?: Array<CascaderOptionType>;
    valueField?: string;
  }>(),
  {
    valueField: 'id',
    labelField: 'name',
    childrenField: 'children',
    requestMethod: 'post',
    value: () => [],
  },
);

const emit = defineEmits<{
  (e: 'update:value', value: Array<CascaderOptionType>): void;
}>();

const value = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit('update:value', val);
  },
});
defineExpose({
  getValue() {
    return value.value;
  },
});
</script>
<template>
  <ApiComponent
    v-model="value"
    model-prop-name="value"
    :component="Cascader"
    :value-field="valueField"
    :label-field="labelField"
    :children-field="childrenField"
    :api="createApiFunction(api, requestMethod)"
    class="w-full"
  />
</template>
<style lang="less" scoped></style>
